<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      li {
        font: 22px/30px "simsun";
        cursor: pointer;
        margin: 5px;
      }
    </style>
    <script src="./jquery.min.js"></script>
    <script>
      $(function () {
        $("ul li:even").css("background", "green");
        $("ul li:odd").css("background", "skyblue");
        $("ul li").hover(
          function () {
            $("ul li:even").css("background", "green");
            $("ul li:odd").css("background", "skyblue");
            $(this).css("background", "red");
          },
          function () {
            $("ul li:even").css("background", "green");
            $("ul li:odd").css("background", "skyblue");
          }
        );
      });
    </script>
  </head>
  <body>
    <ul>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
    </ul>
  </body>
</html>
